<template>
  <div id="app">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <span style="font-size: 30px">消费记录</span>
          <el-divider>
            <!-- <span style="font-size: 20px">请确认订单</span> -->
          </el-divider>
          <el-page-header content="订单信息">
          </el-page-header>
          <el-table 
          :data="gridData" 
          stripe  
          border
          height="650"
          >
            <el-table-column property="orderid" label="订单编号" width="300"></el-table-column>
            <el-table-column property="id" label="会员id" width="200"></el-table-column>
            <el-table-column property="score" label="积分" width="200"></el-table-column>
            <el-table-column property="idclass" label="会员等级" width="200">
              <!-- <template slot-scope="scope">
                              <el-input-number v-model="scope.row.amount" size="small" :step="1" :min="1"></el-input-number>
                            </template> -->
            </el-table-column>
            <el-table-column property="age" label="年龄" width="100"></el-table-column>
            <el-table-column property="gender" label="性别" width="100"></el-table-column>
            <el-table-column property="date" label="消费时间" sortable></el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button  type="text" @click="showorder(scope.row.orderid)">查看</el-button>
                <el-button class="el-icon-delete" type="text" @click="destroy(scope.row.orderid)"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- <div style="text-align:right">
            <span style="font-size: 13px">已选{{amount()}}件</span>
            <span style="font-size: 20px">合计：{{totalPrice()}}元</span>
            <el-button @click="clear()">清空购物车</el-button>
            <el-button @click="okaikei()">结账</el-button>
          </div> -->
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">

        </div>
      </el-col>
    </el-row>
<el-dialog title="订单信息" :visible.sync="dialogTableVisible">
  <el-table :data="gridData2" stripe  
          border
          height="650">
    <el-table-column property="id" label="商品id" width="150"></el-table-column>
    <el-table-column property="score" label="积分" width="150"></el-table-column>
    <el-table-column property="idclass" label="面包类别" width="150"></el-table-column>
    <el-table-column property="name" label="面包名称" width="150">
      <!-- <template slot-scope="scope">
                  <el-input-number v-model="scope.row.amount" size="small" :step="1" :min="1"></el-input-number>
                </template> -->
    </el-table-column>
    <el-table-column property="amount" label="数量" width="150"></el-table-column>
    <el-table-column property="price" label="价格" width="150" sortable></el-table-column>
    <!-- <el-table-column property="orderid" label="订单编号"  ></el-table-column> -->
    <!-- <el-table-column property="date" label="订购时间" sortable></el-table-column> -->
    <!-- <el-table-column label="操作" width="80">
      <template slot-scope="scope">
        <el-button class="el-icon-delete" type="text" @click="destroy(scope.row.id)"></el-button>
      </template>
    </el-table-column> -->
  </el-table>
</el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
         dialogTableVisible: false,
        form: {
          id: '',
          name: '',
          price: '',
          amount: '',
          date:'',
        },
        gridData: [],
        gridData2:[],
        Timer: null,
        TimerList: [],
        total: 0
      };
    }, methods: {
      findAll() {
        this.$http.get('http://47.96.9.149:8082/records/index').then(response => {
          console.log(response.data);
          this.gridData = response.data;
        })
          .catch(error => {
            console.error();
          });
      },
      timer() {
        let that = this
        this.Timer = setInterval(() => {
          clearInterval(that.timer)
          this.findAll() //调用获取实时数据的方法
        }, 3000)
        this.TimerList.push(this.Timer)
        return this.Timer
      },
      destroy(orderid) {
        console.log(orderid);
        if (confirm('确认删除吗')) {
          this.$http.get('http://47.96.9.149:8082/records/delete?orderid=' + orderid)
            .then(function (response) {
              console.log('删除成功');
              setTimeout(function () {
                window.location.reload();
              }, 100);
            })
            .catch(function (error) {
              console.log(error);
            });
        }
      },
      clear() {
        if (confirm('确认清空吗')) {
          this.$http.get('http://47.96.9.149:8082/clear')
            .then(function (response) {
              console.log('清空成功');

            })
            .catch(function (error) {
              console.log(error);
            });
        }
      },
      totalPrice() {
        var count = 0;
        var data = this.gridData;
        for (var i = 0; i < data.length; i++) {
          var price = data[i].price;
          var number = data[i].amount;
          count = count + price * number;
        }
        return count;
      },
      amount() {
        var count = 0;
        var data = this.gridData;
        for (var i = 0; i < data.length; i++) {
          var number = data[i].amount;
          count = count + number;
        }
        return count;
      },
      showorder(orderid) {
        this.$http.get('http://47.96.9.149:8082/goodstemp/showgoods?orderid='+orderid).then(response => {
          console.log(response.data);
          this.gridData2 = response.data;
          this.dialogTableVisible = true;
        })
          .catch(error => {
            console.error();
          });
        this.dialogTableVisible = true;
      }
    },
    created() {
      this.findAll();
    },
    destroyed() {
      let that = this
      TimerList.forEach((item, index) => {
        clearInterval(item)
      })
      TimerList = []
      Timer = 0;
    }
  };
</script>